<template>
    <div class="earthPanel" ref="earth"></div>
</template>

<script>
// let echarts = require("echarts/lib/echarts");
// require("echarts/lib/chart/map");
import echarts from 'echarts';
import "./world.js";
import opt from "./opt";
import { mapActions } from "vuex";
import { data, BJData, geoCoordMap } from "./data";

let dataMap = new Map();
let storeChart = {};
let localParam = {};

export default {
    name: 'world',
    data() {
        return {
            random: ""
        };
    },
    mounted() {
        localParam = {
            data: data.map(item => {
                dataMap.set(item.name, `0-0-0-0`);
                // if (item.longitude != 0 && item.latitude != 0) {
                //   this.geoCoordMap[item.cityName] = [item.longitude, item.latitude];
                // }
                return item;
            }),
            toolTipData: dataMap,
            geoCoordMap: geoCoordMap,
            BJData: BJData
        };
        console.log(this);
        //this.initChart();
    },
    methods: {
        initChart(params = {}) {
            let paramRender = { ...localParam, ...params };

            if (storeChart[this.random]) {
                storeChart[this.random].clear();
            } else {
                this.random = Math.ceil(Math.random() * 10000);
                storeChart[this.random] = echarts.init(this.$el);
            }
            storeChart[this.random].setOption(opt(paramRender), true);
            storeChart[this.random].on("click", param => {
                if (!param.name) {
                    return;
                }
            });
        }
    },
    beforeDestroy() {
        if (storeChart[this.random]) {
            storeChart[this.random].dispose();
            storeChart[this.random] = null;
            storeChart = {};
            this.random = "";
        }
    }
};
</script>

<style lang="scss" scoped>
.earthPanel {
    height: 690px;
    width: 100%;
}
</style>

